<template>
    <div class="order-steps">
        <ul>
            <li v-for="(name,index) in steps" :key="name" :class="stepClassName(statusStep,index)">
                <strong>
                    <em v-text="index + 1"></em>
                    <svg-icon name="checkbox-active" />
                </strong>
                <span v-text="name"></span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "OrderSteps",
    props: ["info"],
    data () {
        return {
            steps: ['Created', 'In production', 'In transit', 'Delivered', 'Complete']
        };
    },
    computed: {
        statusStep () {
            var state = (this.info || {}).state || {};
            var logs = state.log_state || [];
            var code = state.order_state;

            // 问题订单向前提一个
            // 最后一条是问题订单的，向前找不是问题订单的状态
            var last = logs[logs.length - 1]
            if (last && last.order_state == 15) {
                const normal = this.findLast(logs, i => i.order_state != 15)
                normal && (code = normal.order_state || 0)
            }

            // 0.5 : Unpaid、Pending、Delayed、Transaction、Payment failed
            // 1: 已支付、已生成工单
            // 1.5: 正在生产、生产完成
            // 2: 质检合格
            // 2.5: 已贴运单、物流已揽收、运输中
            // 4: 已完成

            if (code <= 1) {
                return 0.5;
            } else if (code <= 2) {
                if (state.order_pay_state == 10 || state.order_pay_state == 0) {
                    return 1;
                } else {
                    return 0.5
                }
            } else if (code <= 3) {
                return 1.5;
            } else if (code <= 5) {
                return 1.5;
            } else if (code <= 6) {
                return 2;
            } else if (code < 9) {
                return 3.5;
            } else if (code == 9) {
                return 4;
            } else if (code <= 12) {
                return 5;
            } else if (code <= 15) {
                // 13: 待操作-同e步商品(未支付状态)
                // 14: 待操作-地址不可到达(未支付状态)
                // 15: 问题订单
                return 1;
            } else {
                return 0;
            }
        },

    },
    methods: {

        stepClassName (step, index) {
            if (step > index && step < index + 1) {
                return 'processing'
            } else if (step > index) {
                return 'active'
            } else {
                return ''
            }


            //  {active: statusStep > index, processing: statusStep > index && statusStep < index+1 }
        },
        findLast (arr, callback) {
            for (let index = arr.length - 1; index >= 0; index--) {
                const value = arr[index];
                if (callback(value, index, arr)) {
                    return value;
                }
            }
            return undefined;
        },
    },
    created () { },
};
</script>
<style lang="scss" scoped>
.order-steps {
    box-sizing: border-box;

    ul {
        display: flex;
        justify-content: center;
        padding: 60px 0 28px;
    }

    li {
        width: 160px;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            left: -50%;
            top: 13px;
            width: 100%;
            height: 2px;
            background-color: #c7c7c7;
        }
        &:first-child::before {
            display: none;
        }

        strong {
            display: flex;
            margin: 0 auto;
            width: 28px;
            height: 28px;
            border-radius: 28px;
            position: relative;
            z-index: 1;
            background: #fff;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 0 2px #c7c7c7;
            color: #9e9e9e;

            em {
                font-size: 16px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                line-height: 16px;
            }

            svg {
                width: 12px;
                height: 12px;
                color: #fff;
                display: none;
            }
        }

        span {
            margin-top: 10px;
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #757575;
            line-height: 18px;
        }

        &.processing {
            strong {
                color: #fff;
                box-shadow: 0 0 0 4px #e6e6e6;
                background-color: #292929;
            }
            span {
                color: #000;
            }
            &::before {
                background-color: #000;
            }
        }

        &.active {
            strong {
                box-shadow: none;
                background-color: #292929;
                svg {
                    display: block;
                }
                em {
                    display: none;
                }
            }
            &::before {
                background-color: #000;
            }
        }
    }
}
</style>
